<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现自定义列表框与单击清空输入框内容</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
.header{width:1002px; margin:0 auto}
.top{height:102px; width:1002px; position:relative; z-index:10}
.logo{padding:26px 0px 0px 39px; float:left; height:65px; width:172px; overflow:hidden}
.headerR{float:right}
.search{height:25px; padding:5px 19px 0px 0px; float:right; clear:both}
a{outline-style:none; color:#2A2A2A; text-decoration:none}
a:hover{color:#A31815; text-decoration:underline}
a, area{blr:expression(this.onFocus=this.blur())}
.serSelect{
	background: url(images/msquer1.jpg) no-repeat;
	float: left;
	height: 26px;
	width: 168px;
	margin-right: 8px;
	position: relative
}
.ser_sel{
	line-height: 26px;
	color: #CCC;
	padding: 0px 28px 0px 10px;
	height: 26px;
	cursor: pointer;
	margin-left: 25px
}
.sel_list{
	padding: 10px 3px 10px;
	width: 135px;
	position: absolute;
	left: 26px;
	top: 22px;
	background: url(images/serbg.png) no-repeat center bottom;
	display: none
}
.serR{
	float: left;
	height: 26px;
	width: 248px;
	background: url(images/mserBg.jpg) no-repeat
}
</style>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
//头部下拉菜单
  $(".ser_sel").click(function(){$(".sel_list").show()});
  $(".sel_list li").click(function(){
	  $(".ser_sel").css("color","#494949");
	  $(".ser_sel").html($(this).find("a").html());
	  $(".sel_list").hide()
	});
  $(".serSelect").hover(function(){return false},
	              function(){$(".sel_list").hide()
   });
//搜索框
  $(".ser_int").click(function(){
	  if($(this).val()=="请输入搜索关键字"){
		  $(this).css("color","#494949");
		  $(this).val("")}
		});
  $(".ser_int").blur(function(){
	  if($(this).val()==""){
		  $(this).css("color","#ccc");
		  $(this).val("请输入搜索关键字")}
	});
})
</script>

</head>

<body>
<div class="header">
  <div class="top">
    <div class="headerR">
      <div class="search">
      <form class="ser_form" method="post" action="php/index.php?act=search_art">
        <div class="serSelect">
          <div class="ser_sel"> ==请选择== </div>
          <div class="sel_list">
            <ul>
              <li><a class="sel_btn" onclick="return false" href="#">网站制作文档</a></li>
              <li><a class="sel_btn" onclick="return false" href="#">网页图片特效</a></li>
              <li><a class="sel_btn" onclick="return false" href="#">网页文字特效</a></li>
            </ul>
          </div>
        </div>
        <div class="serR">
          <input name="ser_key" type="text" class="ser_int" value="请输入搜索关键字" />
          <input class="ser_btn" name="ser_submit" type="submit" value="" />
          <!--<div class="ser_btn"></div>-->
        </div>
       </form> 
      </div>
    </div>
  </div>
</div>
<script language="javascript">
 $(function(){
  $(".sel_list a").click(function(){
	if($(".sel_list a").index(this)==0){
	$(".ser_form").attr("action","php/index.php@act=search_art");
	}
	if($(".sel_list a").index(this)==1){
	$(".ser_form").attr("action","php/index.php@act=search_txImg");
	}
	if($(".sel_list a").index(this)==2){
	$(".ser_form").attr("action","php/index.php@act=search_txTxt");
	}
	}); 
 });
</script> 
</body>
</html>
